<template>
	<view class="footprint">
		<headTop>
			<uv-navbar title="浏览足迹" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="content">
			<view class="steps">
				<uv-cell-group>
					<uv-cell v-for="item in dataList" :key="item.id" :title="item.action" :center="true"
						style="margin-bottom: 2vw">
						<template v-slot:icon>
							<uv-image :src="item.image[0] ? item.image[0] : '/static/images/default.png'" height="12vw"
								width="12vw" style="margin-right: 3vw" @click="toPage(item.id)">
								<template v-slot:error>
									<uv-image src="/static/images/default.png" height="12vw" width="12vw"
										style="margin-right: 3vw" @click="toPage(item.id)"></uv-image>
								</template>
							</uv-image>
						</template>
						<template v-slot:title>
							<uv-text :lines="1" :text="item.name" @click="toPage(item.id)" />
						</template>
						<template v-slot:label>
							<uv-text type="error" :text="item.price" bold></uv-text>
							<uv-text type="info" :text="`编号${item.id}`" @click="toPage(item.id)"></uv-text>
						</template>
					</uv-cell>
				</uv-cell-group>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import { productApi } from "@/api/index";

	const dataList = ref<any>([]);
	const getList = async () => {
		try {
			const res = await productApi.getbrowselist();
			dataList.value = res.data;
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	const toPage = (id) => {
		uni.navigateTo({
			url: `/pages/productDetails/productDetails?id=${id}`
		});
	};

	/* ---------------------------------------------------跳转上一页------------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss" scoped>
	.footprint {
		.steps {
			margin-top: 3vw;

			.uv-cell {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 1vw !important;
			}
		}
	}
</style>